import {useRef,useState,useEffect} from 'react'
import { Button, Flex, Input, Popover, Table } from "antd";
import { DownOutlined } from '@ant-design/icons';

import Sort from '../Sort';
import './index.less'

const {Search} = Input

// 排序字段配置
const sortFields = [
  {
    name: '名称',
    value: 'name'
  },
  {
    name: '类型',
    value: 'type'
  },
  {
    name: '更新时间',
    value: 'createTime'
  }
];

// 排序方式配置
const sortTypes = [
  {
    name: '升序',
    value: 'asc'
  },
  {
    name: '降序',
    value: 'desc'
  }
];

export default function DatasourceTable(props) {
  const {
    pagination = {
      pageSize: 15,
      total: 0,
      showTotal: (total) => `共 ${total} 条`
    },
    onSearch = () => {},
    sortChange = () => {},
    tableData = [],
    pageChange = () => {},
    connectRender = () => {}
  } = props

  const datasourceBoxRef = useRef(null)
  const [tableHeight, setTableHeight] = useState(670); // table高度

  // table组件的columns配置
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '类型',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '连接参数',
      align: 'center',
      ellipsis: true, // 超出部分显示省略号
      render: connectRender
    },
    {
      title: '描述',
      dataIndex: 'remark',
      align: 'center'
    },
    {
      title: '连接状态',
      dataIndex: 'status',
      align: 'center',
      render: (_, row) => {
        let color = 'green';
        let statusText = '';
        switch (row.status) {
          case 1:
            statusText = '已连接';
            color = 'green';
            break;
          default:
            statusText = '断开';
            color = 'red';
            break;
        }
        return (
          <span style={{ color: color }}>
          {statusText}
        </span>
        );
      }
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      width: 300,
      render: (_, row) => (
        <>
          <Flex justify='space-around' align='center'>
            <Button type="link">查看</Button>
            <div className="partition"></div>
            <Button type="text">修改</Button>
            <div className="partition"></div>
            <Button type="text" danger>删除</Button>
            <div className="partition"></div>
            <Button type="text">刷新</Button>
          </Flex>
        </>
      )
    }
  ];

  useEffect(() => {
    const height = datasourceBoxRef.current.offsetHeight - 126; // 计算高度
    setTableHeight(height); // 设置table高度
  }, []);

  return (
    <div className='datasource-box' ref={datasourceBoxRef}>
      <div className='operate-box'>
        <Flex gap="small">
          <Button type="primary" size='middle'>新 增</Button>
          <Button type="primary" danger size='middle'>删 除</Button>
        </Flex>
        <Flex gap="small">
          <Search placeholder="请输入数据源名称" enterButton onSearch={onSearch} />
          <Popover placement="bottomRight" content={<Sort sortFields={sortFields} sortTypes={sortTypes} sortChange={sortChange} />}>
            <Button type="text" size='middle'>排序<DownOutlined /></Button>
          </Popover>
        </Flex>
      </div>
      <Table // 数据表格组件
        rowKey='id' // 行唯一标识
        size='small' // 表格尺寸
        bordered // 是否显示边框
        columns={columns} // 列配置
        dataSource={tableData} // 数据源
        rowSelection={{ type: 'checkbox' }} // 行选择配置
        pagination={pagination} // 分页配置
        scroll={{ y: tableHeight }} // 滚动配置
        onChange={pageChange} // 分页、排序、筛选变化时触发
      />
    </div>
  );
}